<template>
    <div class="menuBox">
        <div class="header">
            <div class="sort-bt">
                <span @click="changeSort2()" :class="{ 'sales-sort': isActive3 }">销量</span>
                <span @click="changeSort1()" class="price-sort"
                    :class="{ 'no-select': isActive0, 'low': isActive1, 'high': isActive2 }">价格</span>
            </div>
            <span class="title">{{ title }}</span>
        </div>
        <ul class="menu">
            <li class="menu-item" v-for="item in goods" @click="toDetail(item.id)">
                <van-image :src="item.image" />
                <div class="menu-item-info">
                    <span class="new-product">新品</span>
                    <span class="menu-item-title">{{ item.name }}</span>
                    <span class="desc">{{ item.description }}</span>
                    <span class="sales">销量：{{ item.sales }}</span>
                    <div class="price">
                        <span class="price1">￥<span class="price2">{{ item.price }}</span></span>
                        <div class="add-cart" @click.stop="add(item)">+</div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <van-action-sheet v-model:show="isShow">
        <div class="pop" v-if="product">
            <div class="header">
                <van-image :src="product.image" />
                <div class="detail">
                    <span class="title">{{ product.name }}</span>
                    <span class="price">￥<span class="rmb">{{ product.price }}</span></span>
                </div>
            </div>
            <div class="content">
                <span>购买数量</span>
                <van-field name="stepper">
                    <template #input>
                        <van-stepper v-model="num" theme="round" button-size="32" />
                    </template>
                </van-field>
            </div>
            <div class="foot">
                <van-button type="primary" @click="addCart(product.id, num)">确定</van-button>
            </div>
        </div>
    </van-action-sheet>
</template>
<script setup>
import { computed, ref, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import axios from '../utils/axios'

const props = defineProps({
    // 对应选项页商品列表
    catesGoods: {
        type: Array,
        default: [],
    },
    // 对应选项页小标题
    title: {
        type: String,
        default: ''
    },
})
// 监听小标题数据变化，改变排序按钮样式
const disapper = computed(() => {
    return props.title
})
watch(disapper, () => {
    isActive0.value = true
    isActive1.value = false
    isActive2.value = false
    isActive3.value = false
})
// 实例化store
const store = useStore()
// 菜单页对应商品
const goods = computed(() => {
    return props.catesGoods
})
// 购买弹窗
const isShow = ref(false)
// 购买数量
const num = ref(1)
const product = ref('')
const add = (item) => {
    num.value = 1
    isShow.value = true
    product.value = item
}

// 添加商品到购物车
const addCart = (dishid, num) => {
    console.log(dishid, num)
    isShow.value = false
    axios.post('/add_shop', { dishid: dishid, number: num }).then((res) => {
        // console.log(res)
        store.dispatch('fetchCartCount')

    })
}
// 小标题
const title = computed(() => {
    return props.title
})
// 实例化router
const router = useRouter()

// 销量、价格排序按钮样式类绑定的判断值
const isActive0 = ref(true)
const isActive1 = ref(false)
const isActive2 = ref(false)
const isActive3 = ref(false)

// 按价格排序切换按钮
const changeSort1 = () => {
    console.log(isActive0.value, isActive1.value, isActive2.value);
    isActive3.value = false
    if (isActive1.value || isActive0.value) {
        console.log(1);
        isActive1.value = false;
        isActive2.value = true;
        isActive0.value = false
        props.catesGoods.sort(function (a, b) {
            return a.price - b.price
        })
    }
    else if (isActive2.value) {
        console.log(2);
        isActive2.value = false;
        isActive1.value = true;
        props.catesGoods.sort(function (a, b) {
            return b.price - a.price
        })
    }
}
// 按销量排序切换按钮
const changeSort2 = () => {
    if (isActive3.value) {
        isActive0.value = true
        isActive1.value = false
        isActive2.value = false
        isActive3.value = false
        props.catesGoods.sort(function () {
            return Math.random() - 0.5
        })
    } else {
        isActive0.value = true
        isActive1.value = false
        isActive2.value = false
        isActive3.value = true
        // goods2.value = JSON.parse(JSON.stringify(props.catesGoods));
        props.catesGoods.sort(function (a, b) {
            return b.sales - a.sales
        })
        // console.log(goods2.value);
    }
}
// 跳转商品详情页
const toDetail = (goods_id) => {
    router.push(`/goods/${goods_id}`).then(() => {
        window.scrollTo(0, 0);
    });
}
</script>
<style scoped>
/* 菜单页样式 */
.sort-bt {
    display: flex;
    justify-content: flex-end;
    padding: 0.4rem 0.2rem 0.5rem 0;
}

.sort-bt span {
    width: 1.3rem;
    color: gray;
}

.no-select {
    background: url(http://sy.xunbao178.com/images/person/per_list_tit_default.gif) no-repeat;
    background-position: 0.628rem 0.002rem;
}

.sort-bt .low {
    color: black;
    background: url(http://sy.xunbao178.com/images/person/per_list_tit_low.gif) no-repeat;
    background-position: 0.628rem 0.002rem;
}

.sort-bt .high {
    color: black;
    background: url(http://sy.xunbao178.com/images/person/per_list_tit_high.gif) no-repeat;
    background-position: 0.628rem 0.002rem;
}

.sort-bt .sales-sort {
    color: rgb(252, 136, 54);
}

.title {
    display: block;
    width: 82%;
    height: 0.5rem;
    line-height: 0.5rem;
    padding-left: 0.5rem;
    color: gray;
    background-color: rgba(137, 137, 137, 0.1);
    border-radius: 1rem;
    margin: 0 0.3865rem;
}

.menu-item-info {
    position: relative;
}

.add-cart {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #00a73c;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    bottom: 8px;
    right: 15px;
}
</style>